<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script th:src="@{/other/check.js}"></script>
    <style>
        #telResult{
            display: none;
            color: red;
            margin-top: 10px;
            margin-left: 200px;
        }
        #passResult{
            display: none;
            margin-left: 60px;
            margin-top: 10px;
            color: red;
            font-size: 11px;
        }
    </style>
</head>
<body>
<div class="login-main" style="width: 1500px;height: auto;margin-left: auto;margin-right: auto">
    <!--左上角logo图片-->
    <img th:src="@{/images/logo.png}" style="margin-left: 15%">
    <div style="margin-top: 150px">
<!--        <h1 class="layui-elip" style="margin-left: 700px;">用户注册</h1>-->
        <form class="layui-form" style="margin-left: auto;margin-right: auto;width: 500px;padding: 20px;background-color: #00C0F7;border-radius: 5px">
            <h1 class="layui-elip" style="margin-left: 39%;">用户注册</h1>
            <div class="layui-input-inline">
                <input type="text" name="username" required lay-verify="required" placeholder="用户名" class="layui-input" autocomplete="off" style="height:45px;margin-top: 15px;width: 350px;margin-left: 80px;font-size: 18px">
            </div><br>
            <div class="layui-input-inline">
                <input id="pass" type="password" onblur="passCheck()" name="password" required lay-verify="required" placeholder="密码" class="layui-input" autocomplete="off" style="height:45px;margin-top: 15px;width: 350px;margin-left: 80px;font-size: 18px">
                <p id="passResult" class="layui-anim layui-anim-scaleSpring">密码格式有误，输入8-16位密码 至少包含一个数字和一个字母</p>
            </div><br>
            <div class="layui-input-inline">
                <input type="text" name="age" required lay-verify="required" placeholder="年龄" class="layui-input" autocomplete="off" style="height:45px;margin-top: 15px;width: 350px;margin-left: 80px;font-size: 18px">
            </div><br>
            <div class="layui-input-inline">
                <input type="text" name="address" required lay-verify="required" placeholder="住址" class="layui-input" autocomplete="off" style="height:45px;margin-top: 15px;width: 350px;margin-left: 80px;font-size: 18px">
            </div><br>
            <div class="layui-input-inline">
                <input id="tel" onblur="telCheck()" type="text" name="tel" required lay-verify="required" placeholder="手机号" class="layui-input" autocomplete="off" style="height:45px;margin-top: 15px;width: 350px;margin-left: 80px;font-size: 18px">
                <p id="telResult" class="layui-anim layui-anim-scaleSpring">手机号格式有误！</p>
            </div><br>
            <div class="layui-input-inline" style="position: absolute;margin-top: 10px">
<!--                <input type="text" name="sex" required lay-verify="required" placeholder="性别" class="layui-input" autocomplete="off" style="height:45px;margin-top: 15px;width: 200px;margin-left: 80px;font-size: 18px">-->
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男" checked>
                    <input type="radio" name="sex" value="女" title="女">
                </div>
            </div><br>
            <div class="layui-input-inline login-btn" style="margin-top: 40px">
<!--                <button lay-submit lay-filter="login" 	class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal layui-anim-scalesmall" style="margin-left: 200px;margin-top: 15px;width: 100px">提交</button>-->
                <button lay-submit lay-filter="login" class="layui-btn layui-btn-radius" style="margin-left: 200px;margin-top: 15px;width: 100px">提交</button>
            </div>
        </form>
    </div>
    <footer style="margin-top: 130px;margin-left: 45%;margin-bottom: 20px">Copyright© Design By leileiMann</footer>
</div>

<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script>
    layui.use("form",function () {
        var form = layui.form;
        var $ = layui.$;
        //监听提交
        form.on("submit(login)",function (data) {
            /*使用ajax*/
            $.ajax({
                url:"/user/register",  /*传入地址*/
                type:"POST",  /*请求方式*/
                data:data.field,  /*传入的数据为form中的数据*/
                dataType:"json",   /*数据格式为json*/
                success: function (result) {   /*成功调用方法，参数为result*/
                    if(result.code == "1"){
                        layer.msg(result.msg,{icon:result.icon,anim:result.anim},function () {
                            location.href = "login";    //登录成功，转向登录页面
                        });
                    }else{
                        layer.msg(result.msg,{icon:result.icon,anim:result.anim});
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
















